<template>
  <div>
    <charts :option="option"></charts>
  </div>
</template>

<script>
import charts from "./charts.vue";
import {mapState} from "vuex"
export default {
  components: { charts },
  name: "ChartRightPie",
  data() {
    return {
      option: {},
      // allData: [], // 服务器获取的所有数据
    };
  },
  mounted() {
    // this.getData();
    this.updateChart();
  },
   watch:{
    RightPie: {
      deep: true,
      handler(a,b) {
          this.updateChart();
      },
    },
    },
 computed:{
     ...mapState({RightPie:"RightPie"}),
 },

  methods: {
    async getData() {
      await this.$http.get("charts/pie/getRight").then((res) => {
        this.allData = res.data.data.list;
        this.updateChart();
      });
    },
    updateChart() {
      const option = {
        color: [
          "#006cff",
          "#60cda0",
          "#ed8884",
          "#ff9f7f",
          "#0096ff",
          "#9fe6b8",
          "#32c5e9",
          "#1d9dff",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: "0%",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "rgba(255,255,255,.5)",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "地区分布",
            type: "pie",
            radius: ["10%", "70%"],
            center: ["50%", "50%"],
            roseType: "radius",
            // 图形的文字标签
            label: {
              fontSize: 10,
            },
            // 链接图形和文字的线条
            labelLine: {
              // length 链接图形的线条
              length: 6,
              // length2 链接文字的线条
              length2: 8,
            },
            data: this.RightPie,
          },
        ],
      };
      this.option = option;
    },
  },
};
</script>

<style lang="less" scoped>
</style>